import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/budget_avatar.dart';
import 'package:macnov/common/search_box.dart';
import 'package:macnov/models/company_user.dart';
import 'package:macnov/stores/budget.dart';

class BudgetMember extends StatefulWidget {
  @override
  _BudgetMemberState createState() => _BudgetMemberState();
}

class _BudgetMemberState extends State<BudgetMember> {
  _changeSelect(CompanyUser companyUser) {
    budgetStore.selectMemberUser(companyUser);
  }

  Widget _buildMembers() {
    return Observer(
        builder: (_) => ListView(
              shrinkWrap: true,
              children: budgetStore.memberUsers
                  .map(
                    (companyUser) => Container(
                        color: Colors.white,
                        child: ListTile(
                            onTap: () => _changeSelect(companyUser),
                            leading: BudgetAvatar(
                              arguments: [companyUser.first, companyUser.last],
                            ),
                            title: Text(
                                '${companyUser.first} ${companyUser.last}'),
                            trailing: companyUser.selected
                                ? Image.asset(
                                    'assets/budget/duigou.png',
                                    width: 28,
                                  )
                                : Icon(
                                    Icons.arrow_downward,
                                    color: Colors.white,
                                  ))),
                  )
                  .toList(),
            ));
  }

  _goBack(BuildContext context) {
    Navigator.pop(context);
  }

  _save(BuildContext context) {
    budgetStore.saveMemberFormData();
    _goBack(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         backgroundColor: Colors.white,
        brightness: Brightness.light,
        iconTheme: IconThemeData(color: Colors.black),
        elevation: 0.5,
        title: Text('MEMBERS',style: TextStyle(color: Colors.black),),
        centerTitle: true,
        actions: <Widget>[
          FlatButton(
            child: Text(
              'DONE',
              style: TextStyle(color: Colors.black, fontSize: 12),
            ),
            onPressed: () => _save(context),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: SearchBox(),
            ),
            _buildMembers()
          ],
        ),
      ),
    );
  }
}
